<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="user-info-box">
					<view class="info-item flexWrap">
						<view>姓名/称谓</view>
						<view>{{userInfo.nickname}}</view>
					</view>
					<view class="info-item flexWrap">
						<view>手机号</view>
						<view>{{userInfo.mobile}}</view>
					</view>
					<view class="info-item flexWrap" @tap="showModel()">
						<view>登录密码</view>
						<view>修改 <text class="icon-more"></text></view>
					</view>
				</view>
				
				<view class="login-box" v-if="modelFlag">
					<view class="close-btn" @tap="closeModel()">
						<image src="/static/user/close.png"></image>
					</view>
					<view class="login-tips flexWarpCenterColumn">
						<text class="welcome">修改密码</text>
					</view>
					<view class="login-cont">
						<view class="tips">
							密码安全规范：必须大于等于6位，且必须是字母（可以选择大写或者小写）、数字的组合。
						</view>
						<view class="input-box">
							<input placeholder="新密码" placeholder-class="placeholderClass" v-model="new_password"/>
						</view>
						<view class="input-box">
							<input placeholder="确认密码" placeholder-class="placeholderClass" v-model="confirm_password"/>
						</view>
						<view class="login-btn" @tap="resetpwd()">确认修改</view>
					</view>
					<view class="login-Bg">
						<image src="https://static.mo-yu.vip/wechat/images/loginBg.png"></image>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				modelFlag:false,
				old_password:"",
				new_password:"",
				confirm_password:"",
				userInfo:{},
				show:0
			}
		},
		onLoad(ops) {
			this.getUserinfo()
			this.show=ops.show||0
			if(ops&&ops.show==1){
				this.showModel();
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			showModel(){
				this.modelFlag=true
			},
			closeModel(){
				this.modelFlag=false
			},
			// 获取个人信息
			getUserinfo(){
				this.$request.post(this.$api.userinfo, {}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.userInfo=data.userinfo
					}
				})
			},
			// 修改密码
			resetpwd(){
				if(!this.new_password||!this.confirm_password){
					this.$tools.showToast('请填写完整后提交');
					return;
				}
				if(this.new_password!=this.confirm_password){
					this.$tools.showToast('两次输入的密码不同');
					return;
				}
				let passTest=/^(?=.*\d)(?=.*[a-zA-Z])^[\da-zA-Z]{6,16}$/g.test(this.new_password)
				if(!passTest){
					this.$tools.showToast('请填写正确的密码格式');
					return;
				}
				this.$request.post(this.$api.resetpwd, {
					// old_password:this.old_password,
					new_password:this.new_password,
					confirm_password:this.confirm_password
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('修改成功,请重新登录');
						setTimeout(()=>{
							this.loginOut();
						},1000)
					}
				})
			},
			loginOut() {
				uni.clearStorage();
				setTimeout(function() {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.user-info-box{
		padding: 0 36upx;
		.info-item{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40upx;
			color: #FFFFFF;
			padding: 34upx 0;
			border-bottom: 1upx solid #36355E;
			.icon-more{
				border-color:#fff;
				border-width: 4rpx;
				margin-left: 10upx;
			}
		}
	}
	.login-box{
		height: 836upx;
		width: 710upx;
		background:#1A195F;
		border-radius: 16upx;
		margin-top: 340upx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 94upx;
		margin: auto;
		.close-btn{
			width: 48upx;
			height: 48upx;
			top: 20upx;
			right: 20upx;
			position: absolute;
		}
		.login-tips{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
			padding-top: 80upx;
			.welcome{
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 66upx;
				color: #FFFFFF;
			}
		}
		.login-cont{
			padding: 56upx;
			position: relative;
			z-index: 99;
			.tips{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 46upx;
				color: #FFFFFF;
				margin-bottom: 20upx;
				display: block;
			}
			.input-box{
				height: 100upx;
				background: #312F80;
				border-radius: 16upx;
				padding: 0 32upx;
				margin-top: 34upx;
				&:nth-of-type(1){
					margin-top: 0;
				}
				input{
					height: 100upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 400;
					color:rgba(255,255,255,.5);
				}
				.placeholderClass{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 400;
					color:rgba(255,255,255,.5);
				}
			}
			.login-btn{
				width: 286upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background: #26BCFD;
				border-radius: 16upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
				margin-top: 56upx;
			}
		}
		.login-Bg{
			width: 710upx;
			height: 384upx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
</style>
